<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="name" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model="phone" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model="address" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="detailAddres" />
			</view>
			<!-- <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="bottom">
			<!-- <view class="tag">
				<view class="left">标签</view>
				<view class="right">
					<text class="tags">家</text>
					<text class="tags">公司</text>
					<text class="tags">学校</text>
					<view class="tags plus"><u-icon size="22" name="plus"></u-icon></view>
				</view>
			</view> -->
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><switch color="red" @change="setDefault" /></view>
			</view>
		</view>
		<statement :text="text"></statement>
		<!-- <u-button shape="square" @click="confirmCheck()" :custom-style="{border:'none'}" :hair-line='false' >确认修改</u-button> -->
		<u-button type="primary" :custom-style="{border:'none'}" :hair-line='false' :disabled="btnStatus==false" @tap=modifyAddress()>确认修改</u-button>
		<u-picker mode="region" ref="uPicker" v-model="show"  @confirm="confirm" />
	</view>
</template>

<script>
import statement from '../../commponts/statement.vue'
export default {
	components:{
		statement
	},
	data() {
		return {
			show: false,
			name:'',
			phone:'',
			address:'',
			detailAddres:'',
			province:'',
			city:'',
			area:'',
			adId:'',
			text:"修改收货地址代表同意"
		};
	},
	methods: {
		setDefault() {},
		showRegionPicker() {
			this.show = true;
		},
		confirm(e){
			// console.log();
			this.address=e.province.label + e.city.label + e.area.label
			this.province=e.province.label;
			this.city=e.city.label;
			this.area= e.area.label;
		},
		// 修改地址
	    async modifyAddress(){
			const params={
				name:this.name,
				address:this.detailAddres,
				phone:this.phone,
				province:this.province,
				city:this.city,
				county:this.area
			}
			await this.$u.put('/api/address/' +this.adId,params).then(res=>{
				if(res.statusCode===204){
					uni.showToast({
						title:'修改地址成功',
						icon:'success'
					})
					setTimeout(res=>{
						uni.$u.route({
							type: 'redirectTo',
							url: 'pages/userInfoChange/adreess'
						})
					},1000)
				}else{
					uni.showToast({
						title:'修改地址失败',
						icon:'error'
					})
				}
			}).catch(err=>{
				console.log(err)
			})
		}
	},
    async onLoad() {
		uni.$on('addressId',res=>{
			console.log(res)
			this.adId=res;
			uni.setStorageSync('res',this.adId)
		})
		uni.$emit('send');
		// console.log(uni.getStorageSync("res"));
		this.adId=uni.getStorageSync("res")
		// 根据传递过来的addressID请求地址的详细信息
		await this.$u.get('/api/address/' +this.adId).then(res=>{
			console.log(res);
			
			this.name=res.data.name;
			this.phone=res.data.phone;
			this.detailAddres=res.data.address;
			this.province=res.data.province;
			this.city=res.data.city;
			this.area=res.data.county;
			this.address=res.data.province +res.data.city + res.data.county
		}).catch(err=>{
			console.log(err)
		});
		
	},
	onUnload() {
		uni.$off('addressId');
		uni.$emit('send')
	},
	computed:{
		btnStatus(){
			return this.name!=''&&this.phone!=''&&this.address!=''&&this.detailAddres!=''
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	// background-color: #f2f2f2;
	padding: 40rpx;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
</style>
